How To Add Subscription Form To Website To Start Email Marketing ?
September 8th, 2016 | by Ravi Chahar || 12 Comments |
You all know that email marketing is one of the leading marketing strategies to drive traffic to your blog. You can have a lot of people reading your blog posts only if you add subscription form to website.
I mean how can some possibly reach your blog posts through their inbox until you provide the way to subscribe to your weekly updates.
You may use any email service and most of the email service providers let their users, to create their own email from. You can do that with the Mailchimp or any other premium email service provider.
Do You Want To Add Subscription Form to Website Manually?
Well, you may use any plugin to add opt-in box using any plugin. But what’s the need to use any plugin when you can add it manually.
In this post, I am going to give you an idea for adding the subscription box to your website. You can add an email form to your website by copying the form fields from your email service providers and customize it according to the color of your website.
There are some simple steps to follow to add opt-in box without any plugin.
Step 1:- As I have mentioned above that most of the email service providers let you create your own form. Just choose the type of form and copy the form including the input fields.
Step 2:- Make sure that you don’t copy the Javascript or any Jquery code. The only code which is needed for the security purpose is the validation code. For the designing of the form, many extra codes will be included.
Step 3:- Copy the code from <form> tag to </form> tag. It means that you are picking up the starting and ending tag of the form including all the inputs. The input fields are dependent upon your choice. Whether you want to add the name field or just the email.
Step 4:- Paste the code in the side-widget or the footer-widget. Wherever you want to show the opt-in box.
Step 5:- Now you have to check the “ID” and “CLASS” of the form and the input fields so that you can design the form according to the layout of your website.
If you have a little bit of knowledge of CSS then you can easily add the background color, padding, margin, etc.
Let me show you an example of the form.
<form action=”” method=”get” class=”opt-in”>
<input type=”text” placeholder=”Your Name” id=”name”>
<input type=”text” placeholder=”Your Email” id=”email”>
<input type=”button” value=”submit” id=”button”>
</form>
I have mentioned a simple form in which you can include the action and the validation by visiting your email service provider. The IDs are given to all the inputs and you can design them.
Let me show a little bit of CSS for this form.
Input#button { background-color: #f18902; color: white; }
Here padding is given to all the inputs and the background color is set for the submit button. You can do a lot of things with the form.
You can create horizontal form using CSS and all the designing of the form can be done using the CSS only. If you want to make this from as mobile-friendly then you can use the media screen properties.
For example:-
.email-form input { padding 5px 10px; }
There are a lot of things to do for which you have to learn CSS.
Can You Now Add Subscription Form To Website?
I have given you an idea of adding an opt-in box to your website. Now you have to do the rest of the task. You have to find the form code from the email providers and paste it in the sidebar.
In most of the cases, you won’t need to write any code, there are many form builder to use. You can design the form according to the theme you are using. Add subscription form to website using your own code if you want to have the full control over it.
But still, if you want to design the form then manual designing can be done using CSS. If you still face any problem then feel free to ask.
If you liked the article then connect with us on Twitter, LinkedIn, and Facebook.
Related Posts
12 comments
Leave a Reply
Hey Ravi,
How awesome is this? So this is pretty much just collecting emails right? Would we even have to use a newsletter program if we went this route? Inquiring minds want to know. ?
B
Hi Bren,
How would you send the emails without any newsletter program? The above-mentioned method is just an example to provide an idea of adding and styling the subscription form.
It would help you to design the newsletter box according to the design of your theme. You just have to copy the form code from your newsletter service provider and place it in the sidebar.
Rest, the styling would be left. You can do that your own.
It would save you to add the extra codes the newsletter provides embed in the form.
I hope this can give an idea.
~Ravi
Seriously,
This is a mind blowing post.
I never knew i could use a code in place of a wordpress plugin.
Thank you very much Ravi.
Crafty Sprout
There are many tasks which can be completed without any plugin. Though if you don’t want to play with the codes then WordPress plugins are the best friend.
But if you know a little bit of coding then avoid plugins and add manually.
Thanks for stopping by.
Have a good day.
~Ravi
Hello Ravi,
As always you have brought up a great tutorial to us. Reducing plugins is necessary to boost up the page load of our website. And this tutorial can help in reducing one.
I wanted to make a subscription form appear after the post article, will this work?
Thanks for your advice
Hey Ugyen,
It’s always good to reduce the no. of plugins on your WordPress site. You can add the subscription box anywhere to your website. But if you want to add it after the post title or the single post then you have to add the form in the single.php file of the theme.
You need to know the proper structure of HTML and PHP for that.
Thanks for being here.
Have a great day.
~Ravi
Hi Ravi,
Thanks for the response. Well, I don’t want to appear in every post but in some posts only. Adding those code within the post contents, is that possible…
Thanks for your great help.
Ugyen
Hey Ugyen,
Of course, it is possible to show the subscription box below the post your want. You have to place the form code in the WordPress text editor while writing the blog post.
But it’s kind of complicated stuff. You have to take care of the appearance of the subscription box with the inline CSS. And if the form content displays with the post then you have to hide it.
To do that, you should have proper knowledge about HTML and CSS.
~Ravi
Hi Ravi bro,
I have added email subscription form using free opt-in feature of Mailmunch. This has fetched me quite a good number of subscribers now.
Since you’ve brought yet another method of adding this i.e manually, it does sound good meriting my trial to adding it and making comparison.
Regards
Hey Sherab,
Mailchimp is one of the best newsletter service providers using which you can develop your own subscription form. But the code consists a lot of things which are not necessary.
You can minimize the form code and create your own design using CSS. If you don’t want to do any customization then just copy and paste the Mailchimp form code in the sidebar of your website.
Thanks for the support.
Have a wonderful day.
~Ravi
Hi Ravi,
Well this is another useful tutorial post in which you have nicely explained each and every step, with the help of these one can add subscription form to any blog or website. Most of the bloggers use plugins for that purpose but with the help of this little code any one can easily add subscription form without using any plugin.
Many thanks for quality share ?
Regards
Mairaj
Hey Mairaj,
It’s easy to handle a WordPress with the use of the plugins. But what’s the need to increase the no. of HTTP request by adding another plugin when you can do that manually.
I have provided just an idea of adding a subscription box. Rest, the users have to pick up the form code from their email service providers.
Thanks for stopping by.
Have an awesome day.
~Ravi